<template>
  <el-dialog
    title="题目预览"
    :visible="view"
    @close="$emit('yt', false)"
    width="50%">
    <div class="view-top">
      <el-row style="margin-bottom: 20px" type="flex" justify="space-around">
        <el-col :span="6">【题型】 ： {{ quesType  }}</el-col>
        <el-col :span="6">【编号】 ： {{ data.id }}</el-col>
        <el-col :span="6">【难度】 ： {{ defType }}</el-col>
        <el-col :span="6">【标签】 ： {{ data.tags }}</el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="6">【学科】 ： {{ data.subjectName }}</el-col>
        <el-col :span="6">【目录】 ： {{ data.directoryName }}</el-col>
        <el-col :span="6">【方向】 ： {{ data.direction }}</el-col>
      </el-row>
    </div>
    <div class="view-top">
      <div>【题干】 ： </div>
      <span ref="asd" style="color: aqua" v-html="data.question"></span>
      单选题 选项: （以下选中的选项为正确答案）
      <div style="margin: 15px 0" v-for="item in data.options" :key="item.id">
        <el-radio :value="render" :label="item.isRight">{{ item.title }}</el-radio>
      </div>
    </div>
    <div class="view-top">
      <section>【参考答案】 ： <el-button type="danger" @click="videoShow = true">视频答案预览</el-button></section>
      <div>
        <video v-if="videoShow" controls width="500">
          <source :src="data.videoURL">
        </video>
      </div>
    </div>
    <div class="view-top">
      <div>
        <div class="box">【答案解析】 ： <div class="box1" style="display: inline-block;"><span v-html="data.answer"></span></div></div>
      </div>
    </div>
    <div>
      <section>【题目备注】 ： {{ data.remarks }}</section>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('yt', false)">关 闭</el-button>
    </span>
</el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'WhatB',
  data () {
    return {
      data: {},
      render: 1,
      videoShow: false
    }
  },
  model: {
    prop: 'view'
  },
  props: {
    view: {
      type: Boolean,
      required: true
    },

    id: {
      type: Number,
      required: true
    }
  },

  methods: {
    async getDetail () {
      const res = await detail({
        id: this.id
      })
      this.data = res.data
    }
  },

  created () {
    this.getDetail()
  },

  mounted () {},

  computed: {
    quesType () {
      if (this.data.questionType === '1') {
        return '单选题'
      } else if (this.data.questionType === '2') {
        return '多选题'
      }
      return '简答题'
    },

    defType () {
      if (this.data.difficulty === '1') {
        return '简单'
      } else if (this.data.difficulty === '2') {
        return '一般'
      }
      return '困难'
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .view-top {
  padding-bottom: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #000;
  .el-row {
    font-size: 14px;
  }
  .box {
    width: 100%;
    display: flex;
    .box1 {
      p {
        margin: 0;
      }
    }
  }
}
</style>
